<template>
    <div>
        <el-row class="ContentTable" :gutter="20">
            <el-col :span="24">
                <queryFrom @Refresh="Refresh" :controller="controller"></queryFrom>
                <el-table :data="tableData" ref="table" highlight-current-row @selection-change="handleSelectionChange" style="width: 100%" border>
                    <el-table-column type="selection" min-width="10%"></el-table-column>
                    <el-table-column property="name" label="调查表" min-width="50%">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row class="ButtomBtn">
            <el-col :span="24">
                <div>
                    <el-button type="primary" @click="OnSubmit">保存</el-button>
                    <el-button @click="Hiden">取消</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import queryFrom from '../../SystemDynamicView/form/QueryForm.vue'
export default {
    mounted() {},
        components: {
            queryFrom
        }, props: ['org'],
        data() {
            return {
                tableData: null,
                selectedRow: [],
                pageInfo: {
                    page: 1,
                    pageSize: 9999
                },
                queryInfo: {},
                totalNum: 0,
                queryUrl: 'WfForm/SimpleQuery',
                controller: 'WfForm',
                dynmicList: []
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.selectedRow = val;
            },
            Refresh(queryInfo) {
                if(queryInfo == undefined){
                    queryInfo = {};
                }
                queryInfo.page = this.pageInfo.page;
                queryInfo.pageSize = this.pageInfo.pageSize;
                this.ajax({
                    url: this.queryUrl,
                    data: queryInfo,
                    success: function(data) {
                        this.tableData = data.row;
                        if (data.total != this.totalNum) {
                            this.totalNum = data.total;
                        }
                        this.GetOrgDyn();
                    }
                })
            },
            GetOrgDyn() {
                this.ajax({
                    url: 'SystemOrganization/GetDynByOrg?orgId={0}'.format(this.org.id),
                    success: function(data) {
                        this.RevertData(data);
                    }
                })
            },
            Hiden() {
                this.$emit('Show', false);
                this.ClearData();
            },
            OnSubmit() {
                this.Hiden();
                let data = [];
                this.selectedRow.forEach((item) => {
                    data.push({
                        dynamicViewId: item.id,
                        organizationId: this.org.id
                    })
                });
                this.ajax({
                    url: 'SystemOrganization/SaveDynOrg?orgId=' + this.org.id,
                    type: 'post',
                    contentType: 'application/json',
                    showMessage: "操作成功",
                    data: JSON.stringify(data),
                    success: function(data) {}
                });
            },
            RevertData(dynmicList) {
                if (this.tableData != null) {
                    this.tableData.forEach((item) => {
                        let isSelect = false;
                        for (let i = 0; i < dynmicList.length; i++) {
                            if (dynmicList[i].dynamicViewId == item.id) {
                                isSelect = true;
                                break;
                            }
                        }
                        this.$refs.table.toggleRowSelection(item, isSelect);
                    });
                }
            }
        },
        watch: {
            tableData:function(newVal,oldVal){
                this.GetOrgDyn();
            }
        },
        created() {
            this.Refresh();
        }

}
</script>
<style>
.ContentTable {
    width: 1000px;
    height: 700px
}

.ButtomBtn {
    width: 1000px;
    height: 40px;
    text-align: right;
}
</style>
